<template>
  <div style="width:100%;height:100%;overflow:hidden">
    <div class="xs-container" :style="{height:isMobile?'':'100%'}">
      <div class="xs-content" :style="{height:isMobile?'':'100%'}">
        <div style="overflow-y:auto;overflow-x:hidden;border-top:1px solid #666"
             :style="{
            maxHeight : isMobile ? '' :
            is_last_page ? '100%': 'calc(100% - 25px)'
          }">
          <div v-for="item in logs" style="border-bottom:1px solid #666">
            <div>{{item.link}}</div>
            <div style="font-size:12px;color:#333"> {{item.customer_phone}} | {{item.time}}</div>
          </div>
        </div>
        <div style="text-align:center" v-if="!isMobile && !is_last_page" @click="on_more_click">
          加载更多
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import global from '../lib/global'
  import Xscroll from '../lib/xscroll/xscroll'
  import Pulldown from '../lib/xscroll/plugins/pulldown'
  import Pullup from '../lib/xscroll/plugins/pullup'
  import browserDetect from '../lib/browserDetect'
  import axios from 'axios'

  var xscroll
  var pulldown
  var pullup

  export default {
    data() {
      return {
        logs: [],
        isMobile: false,
        page: 1,
        is_last_page: false,
        customer_phone: ''
      }
    },
    mounted() {
      location.hash.split('?')[1] && location.hash.split('?')[1].split('&').forEach(kv => {
        this[kv.split('=')[0]] = decodeURIComponent(kv.split('=')[1])
      })

      this.$store.commit('set_title', (this.customer_phone == '*' ? '全部' : this.customer_phone) + '的访问日志')

      if (!this.$store.state.admin) {
        this.$router.goback()
        return
      }

      this.isMobile = browserDetect().mobile

      if (this.isMobile) {
        xscroll = new Xscroll({
          renderTo: this.$el,
          bounce: true,
          lockX: true,
          lockY: false,
          scrollbarX: false,
          scrollbarY: false,
          useOriginScroll: false,
          useTransition: true,
          preventDefault: false,
          preventTouchMove: true,
          boundryCheck: true,
          gpuAcceleration: true,
          stopPropagation: true,
          isRealScrollingY: true
        });
        pulldown = new Pulldown({
          autoRefresh: false,
          downContent: '下拉刷新',
          upContent: '松开刷新',
          loadingContent: '刷新中'
        });
        pulldown.on('loading', (e) => {
          this.page = 1
          this.logs = []
          this.is_last_page = false
          this.getLog()
        })
        xscroll.plug(pulldown);
        pullup = new Pullup({
          upContent: '上拉加载更多',
          downContent: '松开加载更多',
          loadingContent: '加载中'
        })
        pullup.on('loading', (e) => {
          this.page++
          this.getLog()
        })
        xscroll.plug(pullup);
        xscroll.render();
      }

      this.getLog()
    },
    methods: {
      getLog() {
        if (this.is_last_page) {
          return
        }
        axios.post(global.server + 'getCustomerLog.do', {
          page: this.page,
          customer_phone: this.customer_phone
        }).then(result => {
          const obj = result.data
          if (obj.result == 1) {
            this.logs.push.apply(this.logs, obj.logs)
            if (obj.logs.length < 10) {
              this.is_last_page = true
            }
            if (this.isMobile) {
              this.$nextTick(() => {
                xscroll && xscroll.render()
                pulldown && pulldown.reset(() => {
                  xscroll && xscroll.render()
                })
                pullup && pullup.complete()
              })
            }
          } else if (obj.result == 0) {
            this.$store.commit('customer_login', null)
            this.$router.goback()
          }
        })
      },
      on_more_click() {
        this.page++
        this.getLog()
      }
    }
  }
</script>
